<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>父工单统计报表</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .layui-form-label {
            width: auto !important;
        }

        .operation span:last-of-type {
            color: #F5222D;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }
        td {
            white-space: nowrap;
            text-align: center;
        }
    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>
<script src="./js/echarts.js" charset="utf-8"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline" >
            <label class="layui-form-label">搜索：</label>
        </div>
        <div class="layui-input-inline " style="width: 15em">
            <select name="deptName" id="deptName" lay-verify="required" lay-filter="deptName">
            </select>
        </div>
        <div class="layui-inline">
            <input type="text" name="lotNo" id="lotNo" class="layui-input" style="width: 18em;" placeholder="输入父工单号码" value="">
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="searchBtn">查询工单报表</button>
        </div>
    </div>
</form>

<span>★ 工单：<b style="color:#ff0000;" id="parentNo"></b>&nbsp;详细信息如下：</span>
<div class="layui-row layui-col-space" style="margin-top: 20px;" >
    <div class="layui-col-md4" id="inProduct" style="width: 550px;height:400px;background-color: #FBFBFB">

    </div>
    <div class="layui-col-md4" id="completionRate" style="width: 550px;height:400px;background-color: #FBFBFB">

    </div>
    <div class="layui-col-md4" id="latelyReport" style="width: 550px;height:400px;background-color: #FBFBFB">

    </div>
</div>


<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var form = null;
    var list = null;

    layui.use(['form', 'element'], function() {
        form = layui.form;3
        $.ajax({
            url: url + '/sys-dept/listDept',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            success: function(res) {
                //显示前先判断是否为管理员
                $.ajax({
                    url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
                    method: 'GET',
                    async : false,
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code===200){
                            isAd=1;
                        }
                        else if (res.code===400){
                            isAd=0;
                            thisDept=res.data.dept;
                        }
                    }
                })
                //按照是否为管理员显示下拉框
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(isAd===1){
                            $("#deptName").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                        }else if (isAd===0&&res.data[i].dept===thisDept){
                            $("#deptName").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                        }
                    }
                    form.render('select');
                }
            }
        })

        //搜索
        $('#searchBtn').click(function () {
            if($('#lotNo').val()==""){
                layer.msg("请输入您想查询的工单号！")
            }else {
                $.ajax({
                    url: '/parent-order/getChartData',
                    method: 'POST',
                    async : false,
                    data: JSON.stringify({
                        deptId: $('#deptName').val(),
                        //reportProcess: res.data.nowProcess,
                        lotNo: $('#lotNo').val(),
                    }),
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code===200){
                            // 基于准备好的dom，初始化echarts实例
                            var inProductChart = echarts.init(document.getElementById('inProduct'));
                            var completionRateChart = echarts.init(document.getElementById('completionRate'));
                            var latelyReportChart= echarts.init(document.getElementById('latelyReport'));
                            // 指定图表的配置项和数据
                            var inProductOption = {
                                title: {
                                    text: '各站待产Lot统计'
                                },
                                tooltip: {},
                                legend: {
                                    data: ['工序站']
                                },
                                xAxis: {
                                    data: res.data.processNames
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name: '数量',
                                        type: 'bar',
                                        data: res.data.lotAmount
                                    }
                                ],
                                animationDuration: 1500,
                                animationEasing: "cubicInOut",
                            };
                            var completionRateOption = {
                                title: {
                                    text: '完成率统计',
                                    subtext: '完成率: '+" "+res.data.completionAmount+"/"+res.data.allTotal, //副标题
                                    x: 'center' //标题居中
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        mark: { show: true },
                                        dataView: { show: true, readOnly: false },
                                        restore: { show: true },
                                        saveAsImage: { show: true }
                                    }
                                },
                                tooltip: {
                                    // trigger: 'item' //悬浮显示对比
                                },
                                legend: {
                                    orient: 'vertical', //类型垂直,默认水平
                                    left: 'left', //类型区分在左 默认居中
                                    data: ['完工数量', '未完工数量']
                                },
                                color:['#5FB878','#FF5722'],
                                series: [{
                                    type: 'pie', //饼状
                                    radius: '60%', //圆的大小
                                    center: ['50%', '50%'], //居中
                                    data: [{
                                        value: res.data.completionAmount,
                                        name: '完工数量',
                                    }, {
                                            value: res.data.notCompletionAmount,
                                            name: '未完工数量',
                                        },
                                    ]
                                }],
                                animationDuration: 1500,
                                animationEasing: "cubicInOut",
                            };
                            var latelyReportOption = {
                                title: {
                                    text: '近七日报工数统计(单位:次)'
                                },
                                tooltip: {},
                                legend: { //顶部显示 与series中的数据类型的name一致
                                    data: [$("#deptName").find("option:selected").text()]
                                },
                                xAxis: {
                                    // type: 'category',
                                    // boundaryGap: false, //从起点开始
                                    data: ['六日前', '五日前', '四日前', '三日前', '两日前', '一日前', '今日']
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                //折线具体数据
                                series: [{
                                    name: $("#deptName").find("option:selected").text(),
                                    type: 'line', //线性
                                    data: res.data.dateAmount,
                                }],
                                animationDuration: 1500,
                                animationEasing: "cubicInOut",
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            inProductChart.setOption(inProductOption);
                            completionRateChart.setOption(completionRateOption);
                            latelyReportChart.setOption(latelyReportOption);
                            $('#parentNo').html($('#lotNo').val())
                        } else if (res.code===400){
                            layer.msg(res.msg)
                        }
                    }
                })
            }
        })

    })



</script>
</body>
</html>